import React from "react";
import ReactEcharts from "echarts-for-react";

// const data = [
//     {
//         createTime: "2024-11-02",
//         sjjeSum: 500.00,
//         hasCashSum: 0.00,
//     },
//     {
//         createTime: "2024-11-04",
//         sjjeSum: 0.00,
//         hasCashSum: 0.00,
//     },
//     {
//         createTime: "2024-11-05",
//         sjjeSum: 500.00,
//         hasCashSum: 300.00,
//     },
//     {
//         createTime: "2024-11-19",
//         sjjeSum: 0.00,
//         hasCashSum: 0.00,
//     },
// ];

const StackedLineChart = props => {
  const { data } = props;
  const getOption = () => {
    const temp = data.sort(
      (a, b) => new Date(a.create_time) - new Date(b.create_time)
    );

    const dates = temp.map(item => item.createTime);
    const sjjeSumData = temp.map(item => item.sjjeSum);
    const hasCashSumData = temp.map(item => item.hasCashSum);

    return {
      title: {
        text: "近30日入金明细"
      },
      tooltip: {
        trigger: "axis"
      },
      legend: {
        data: ["入金金额", "出金金额"]
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: dates
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          name: "入金金额",
          type: "line",
          data: sjjeSumData
        },
        {
          name: "出金金额",
          type: "line",
          data: hasCashSumData
        }
      ]
    };
  };

  return (
    <ReactEcharts
      option={getOption()}
      style={{ height: "400px", width: "100%" }}
    />
  );
};

export default StackedLineChart;
